<template>
    <view>
        <view class="page">
            <view class="cardsale-box">
                <view class="num_box num_box_active">
                    <text class="num">{{ info.allCount || 0 }}</text>
                    <text class="name">巡店点</text>
                </view>
                <view class="num_box">
                    <text class="num">{{ info.alreadyCount || 0 }}</text>
                    <text class="name">已巡店</text>
                </view>
                <view class="num_box num_box_end">
                    <text class="num">{{ info.notCount || 0 }}</text>
                    <text class="name">未巡店</text>
                </view>
            </view>
        </view>
        <view class="selete_box">
            <view class="selete">
                <text :class="'item ' + (index === 0 ? 'active' : '')" :data-index="0" @tap="setIndex">全部</text>
                <text :class="'item ' + (index === 1 ? 'active' : '')" :data-index="1" @tap="setIndex">需巡店</text>
                <text :class="'item ' + (index === 2 ? 'active' : '')" :data-index="2" @tap="setIndex">已巡店</text>
                <text class="customize" @tap="showModel">巡店记录></text>
            </view>
        </view>
        <view class="shop_list" v-for="(item, index) in dataList" :key="index">
            <view class="list_t">
                <view class="list_t_l">
                    <view></view>
                    <text>{{ item.shopName }}</text>
                </view>
                <view class="list_t_r">
                    <text>{{ item.status === 0 ? '未巡店' : '已巡店' }}</text>
                </view>
            </view>

            <view class="info">
                <text>巡检类型：门店巡检</text>
                <text>巡检时间：{{ item.patrolTime || '' }}</text>
                <text>巡检人员：{{ item.staffName }}</text>
            </view>

            <view class="btn" :data-status="item.status" :data-item="item" @tap="goToPage">
                <text>{{ item.status === 0 ? '去巡店' : '查看' }}</text>
            </view>
        </view>
        <view class="back_box">
            <text>{{ loadingTextClone }}</text>
        </view>
    </view>
</template>

<script>
const _request = require('../../utils/request.js');

export default {
    data() {
        return {
            index: 0,
            pageNo: 1,
            dataList: [],
            loadingText: '暂无更多',
            flag: false,

            info: {
                allCount: '',
                alreadyCount: '',
                notCount: ''
            },

            loadingTextClone: ''
        };
    },
    onShow() {
        this.getInfoData();
        this.getInfoList();
    },
    onReachBottom() {
        console.log('触底');

        if (!this.flag) {
            this.pageNo++;
            this.setData({
                loadingText: '加载中'
            });
            this.getInfoList();
        } else {
            this.setData({
                loadingText: '暂无更多'
            });
        }
    },
    methods: {
        chuangType(e) {
            this.setData({
                index: e.currentTarget.dataset.index
            });
        },

        goToPage(e) {
            console.log(e.currentTarget.dataset);
            let item = e.currentTarget.dataset.item;
            let data = {
                staffName: item.staffName,
                shopName: item.shopName,
                id: item.id,
                shopId: item.shopId
            };

            if (e.currentTarget.dataset.status === 1) {
                uni.navigateTo({
                    url: '/pagesc/reportstore/index?type=info&status=1&item=' + JSON.stringify(data)
                });
            } else {
                uni.navigateTo({
                    url: '/pagesc/reportstore/index?type=add&status=1&item=' + JSON.stringify(data)
                });
            }
        },

        getInfoList() {
            this.setData({
                dataList: []
            });
            let data = {
                storeId: uni.getStorageSync('storeId'),
                pageSize: 15,
                pageNo: this.pageNo,
                status: this.index == 0 ? null : this.index == 1 ? 0 : 1
            };

            _request.postObj('/shopPatrolSchedule/page', data).then((res) => {
                if (res.data.code == 200) {
                    if (res.data.data.length < 15) {
                        this.setData({
                            flag: true,
                            loadingText: '暂无更多'
                        });
                    }

                    let list = this.dataList.concat(res.data.data || []);

                    for (let i of list) {
                        if (i.patrolTime) {
                            i.patrolTime = i.patrolTime.replace('T', ' ');
                        }
                    }

                    this.setData({
                        dataList: list
                    });
                }
            });
        },

        getInfoData() {
            _request
                .get('/shopPatrolSchedule/count', {
                    storeId: uni.getStorageSync('storeId')
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        this.setData({
                            info: res.data.data
                        });
                    }
                });
        },

        setIndex(index) {
            this.setData({
                index: index.currentTarget.dataset.index,
                dataList: []
            });
            this.getInfoList();
        },

        showModel() {
            uni.navigateTo({
                url: '/pagesc/cruiseshoprecord/cruiseshoprecord'
            });
        }
    }
};
</script>
<style>
page {
    background: #f1f1f1;
}
.cardsale-box {
    background-image: url('https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/cardsale_banner_2.png');
    width: 100%;
    height: 330rpx;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.num_box {
    width: 200rpx;
    height: 120rpx;
    background: rgba(255, 255, 255, 0.35);
    box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(233, 74, 24, 0.2);
    border-radius: 10rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.num_box_active {
    margin-left: 40rpx;
}
.num_box_end {
    margin-right: 40rpx;
}
.num {
    font-size: 36rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
}
.name {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
}
.phone-box {
    height: 100rpx;
    line-height: 120rpx;
    font-size: 26rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
}

.selete_box {
    width: 750rpx;
    height: 120rpx;
    background: #ffffff;
}
.selete {
    height: 120rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.customize {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #e94a18;
}
.item {
    font-size: 26rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}
.active {
    font-size: 32rpx !important;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333 !important;
    border-bottom: 8rpx solid #e94a18;
}
.set image {
    width: 17rpx;
    height: 11rpx;
    margin-left: 5rpx;
}
.set text {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}
.shop_list {
    width: 750rpx;
    height: 424rpx;
    background: #ffffff;
    margin-top: 20rpx;
}
.list_t {
    height: 100rpx;
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid #e5e5e5;
    justify-content: space-between;
}
.list_t_l {
    display: flex;
    align-items: center;
    margin-left: 40rpx;
}
.list_t_l view {
    width: 8rpx;
    height: 8rpx;
    background: #e94a18;
    border-radius: 50%;
}
.list_t_l text {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    margin-left: 10rpx;
}
.list_t_r {
    margin-right: 40rpx;
}
.list_t_r text {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #999999;
}
.info {
    display: flex;
    flex-direction: column;
    height: 183rpx;
    margin: 0 40rpx;
    border-bottom: 1rpx solid #e5e5e5;
    justify-content: center;
}
.info text {
    line-height: 45rpx;
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}
.btn {
    width: 160rpx;
    height: 60rpx;
    background: #e94c19;
    border-radius: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 39rpx auto;
}
.btn text {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
}
.back_box {
    width: 750rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}
.back_box text {
    color: #ccc;
}
</style>
